<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta content="telephone=no" name="format-detection" />
    <!-- 留作将来统一添加 -->
    <TEMPLATE>${TEMPLATE}</TEMPLATE>
    <title>个人中心</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/index.css">
    <link rel="stylesheet" type="text/css" href="../../css/public.css">
    <link rel="stylesheet" type="text/css" href="../../css/data-flex.min.css">
    <style type="text/css">
        .head_img {
            width: 2rem;
            height: 2rem;
            border-radius: 100%;
            object-fit: cover;
        }

        .lable_item {
            background: #F0FBFC;
            border-radius: 0.75rem;
            height: 0.9rem;
            line-height: 0.9rem;
            padding-left: 0.4rem;
            padding-right: 0.4rem;
            font-size: 0.6rem;
            color: #3BA19A;
            display: inline-block;
            width: 3.4rem;
            text-align: center;
            margin-left: 0.5rem;
        }

        .tips {
            margin-top: 0.75rem;
            padding-left: 0.75rem;
            color: rgba(0, 202, 207, 1);
            font-size: 0.6rem;
        }
    </style>
</head>

<body>
    <div class="vueApp" v-cloak>
        <div v-if="userInfo!=''">
            <div class="space"></div>
            <div class="public_list">
                <div class="public_item" tapmode onclick="fnOpenPhoto('personalInfo','1')">
                    <div class="public_item_left">头像</div>
                    <div class="pulic_item_content">
                        <img class="head_img" :src="userInfo.photo!=''?userInfo.photo:'../../image/mine/head.png'">
                    </div>
                    <img class="public_item_right_img" src="../../image/mine/go_page.png" alt="">
                </div>
                <div class="public_item" tapmode @click="fnOpenPersonalPage('编辑用户名','mine/edit_nickname','0',userInfo.userName)">
                    <div class="public_item_left">用户名</div>
                    <div class="pulic_item_content">{{userInfo.userName}}</div>
                    <img class="public_item_right_img" src="../../image/mine/go_page.png" alt="">
                </div>
                <div class="public_item" tapmode @click="fnOpenPersonalPage('编辑昵称','mine/edit_nickname','1',userInfo.nickName)">
                    <div class="public_item_left">昵称</div>
                    <div class="pulic_item_content">{{userInfo.nickName}}</div>
                    <img class="public_item_right_img" src="../../image/mine/go_page.png" alt="">
                </div>
            </div>
            <div class="space"></div>
            <div class="public_list">
                <div class="public_item" tapmode @click="fnOpenPersonalPage('编辑姓名','mine/edit_nickname','2',userInfo.realName)">
                    <div class="public_item_left">姓名</div>
                    <div class="pulic_item_content">{{userInfo.realName}}</div>
                    <img class="public_item_right_img" src="../../image/mine/go_page.png" alt="">
                </div>
                <div class="public_item" tapmode @click="fnChooseInfo('0',userInfo.sex)">
                    <div class="public_item_left">性别</div>
                    <div class="pulic_item_content" v-text="userInfo.sex=='1'?'男':(userInfo.sex=='0'?'女':'')"></div>
                    <img class="public_item_right_img" src="../../image/mine/go_page.png" alt="">
                </div>
                <div class="public_item" tapmode onclick="fnChangeBirthday()">
                    <div class="public_item_left">生日</div>
                    <div class="pulic_item_content" v-text="userInfo.birthday==''?'':formatTime(userInfo.birthday, 'date')"></div>
                    <img class="public_item_right_img" src="../../image/mine/go_page.png" alt="">
                </div>
                <div class="public_item" tapmode @click="fnChooseInfo('1',userInfo.marStatus)">
                    <div class="public_item_left">婚姻状态</div>
                    <div class="pulic_item_content" v-text="userInfo.marStatus=='1'?'已婚':(userInfo.marStatus=='0'?'未婚':'')"></div>
                    <img class="public_item_right_img" src="../../image/mine/go_page.png" alt="">
                </div>
                <div class="public_item" tapmode @click="fnChooseArea()">
                    <div class="public_item_left" style="flex:initial;padding-right:0.5rem;">所在城市</div>
                    <div class="pulic_item_content overflow_hidden_one" style="flex:1;text-align:right;">{{userInfo.province}} {{userInfo.city}} {{userInfo.county}}</div>
                    <img class="public_item_right_img" src="../../image/mine/go_page.png" alt="">
                </div>
                <div class="public_item" tapmode @click="fnOpenEditInterest(userInfo.signList)">
                    <div class="public_item_left" style="flex:initial;padding-right:0.5rem;">兴趣爱好</div>
                    <div class="pulic_item_content" style="flex:1;text-align:right;display:flex;align-items:center;justify-content:flex-end;overflow:hidden;">
                        <div class="lable_item overflow_hidden_one" v-for="item in userInfo.signList" style="flex:0 1 auto;width:auto;">{{item.signName}}</div>
                    </div>
                    <img class="public_item_right_img" src="../../image/mine/go_page.png" alt="">
                </div>
                <div class="public_item" tapmode onclick="fnEditIntroduction()">
                    <div class="public_item_left" style="flex:initial;padding-right:0.5rem;">个人简介</div>
                    <div class="pulic_item_content overflow_hidden_one" style="flex:1;text-align:right;">{{userInfo.briefNew}}</div>
                    <img class="public_item_right_img" src="../../image/mine/go_page.png" alt="">
                </div>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/service/service-tool.js"></script>
<script type="text/javascript" src="../../script/service/service-app.js"></script>
<script type="text/javascript" src="../../script/service/service-user.js"></script>
<script type="text/javascript" src="../../script/service/service-logic.js"></script>
<script type="text/javascript" src="../../script/service/service-pic.js"></script>
<script type="text/javascript" src="../../script/jquery.min.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript">
    var $S, USER;
    var vm;
    apiready = function() {
        $S = SERVICE();
        USER = USER();
        fnInit();

        fnInitPage();
        api.addEventListener({
            name: 'imgURL'
        }, function(ret, err) {
            if (ret && ret.value.type == 'personalInfo') {
                fnOpenClipPic(ret.value.imgURL[0].path);
            }
        });

    }

    function fnInit() {
        vm = new Vue({
            el: ".vueApp",
            data: {
                custId: USER.Get("custId", true) || "",
                userInfo: ""
                    // 1男0女  1已婚0未婚
            },
            methods: {
                fnSetNBr: function(text) {
                    return text.replace(/\n/g, "<br>");
                }
            }
        })
    }

    function fnInitPage() {
        $S.ShowProgress();
        $S.POST("apiTbAppUser/findUserBasic", "", function(ret, err) {
            if (ret && ret.status == "200") {
                var _brief = ret.data.brief.indexOf("\n")
                if (_brief > -1) {
                    ret.data.briefNew = ret.data.brief.substring(0, _brief) + "..."
                } else {
                    ret.data.briefNew = ret.data.brief
                }
                vm.userInfo = ret.data;
                api.execScript({
                    name: 'mine',
                    script: 'fnInitPage();'
                });

            }
            $S.CloseProgress();
        })
    }


    function fnEditIntroduction() {
        var postData = {
            isBtn: true,
            btnType: "title",
            btnName: "确定",
            headerFn: "fnSubmitIntroduction",
            brief: vm.userInfo.brief
        }
        fnOpenPublicWin("编辑个人简介", "mine/edit_introduction", postData)
    }

    function fnOpenEditInterest() {
        var interestIds = [];
        for (var i = 0; i < vm.userInfo.signList.length; i++) {
            interestIds.push(vm.userInfo.signList[i].signId)
        }
        var postData = {
            isBtn: true,
            btnType: "title",
            btnName: "确定",
            headerFn: "fnSubmitInterest",
            interestIds: interestIds
        }
        fnOpenPublicWin("编辑兴趣", "mine/edit_interest", postData)
    }

    function fnOpenPersonalPage(title, url, editType, editValue) {
        var postData = {
            isBtn: true,
            btnType: "title",
            btnName: "确定",
            headerFn: "fnSaveEdit",
            editType: editType,
            editValue: editValue
        }
        fnOpenPublicWin(title, url, postData)
    }

    function fnChooseInfo(type, val) {
        var param = {
            name: 'info_layer',
            url: './info_layer.html',
            useWKWebView: true,
            bgColor: 'rgba(0,0,0,0)',
            rect: {
                x: 0,
                y: 0,
                w: "auto",
                h: "auto"
            },
            pageParam: {
                val: val,
                type: type
            }
        }
        fnOpenFrame(param);
    }

    function fnChangeBirthday() {
        var param = {
            name: "birthday_layer",
            url: "./birthday_layer.html",
            pageParam: {
                birthday: formatTime(vm.userInfo.birthday, 'date')
            }
        }
        fnOpenFrame(param)
    }

    function fnChooseArea() {
        var param = {
            name: "area_layer",
            url: "./area_layer.html",
            pageParam: {
                provinceCode: vm.userInfo.provinceCode || "",
                cityCode: vm.userInfo.cityCode || "",
                countyCode: vm.userInfo.countyCode || "",
            }
        }
        fnOpenFrame(param)
    }

    function fnSetArea(provinceCode, cityCode, countyCode, areaName) {
        // vm.userInfo.city = cityName;
        // vm.userInfo.cityCode = cityCode;
        // vm.userInfo.county = countyName;
        // vm.userInfo.countyCode = countyCode;
        $S.ShowProgress();
        var postData = {
            "provinceCode": provinceCode,
            "cityCode": cityCode,
            "countyCode": countyCode
        };
        $S.POST("apiTbAppUser/updateUserBasic", postData, function(ret, err) {
            if (ret && ret.status == "200") {
                fnToast("信息修改成功");
                fnInitPage();
            }
            $S.CloseProgress();
        })
    }

    function fnUpdateInfor(type, val) {
        $S.ShowProgress();
        var postData = {};
        postData[type] = val;
        $S.POST("apiTbAppUser/updateUserBasic", postData, function(ret, err) {
            if (ret && ret.status == "200") {
                fnToast("信息修改成功");
                fnInitPage();
            }
            $S.CloseProgress();
        })
    }

    function fnOpenClipPic(url) {
        var tParam = {
            name: 'clip_pic_win',
            url: 'widget://html/clip_pic_win.html',
            pageParam: {
                picUrl: url
            }
        }
        fnOpenWin(tParam);
    }
</script>

</html>
